<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<jsp:include page="${APP_PATH }/userController/toHeadIndex"></jsp:include>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>飞机票列表</title>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<script type="text/javascript"
	src="${APP_PATH }/static/js/jquery.min.js"></script>
<link
	href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
	rel="stylesheet">
<style type="text/css">
</style>
<script
	src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="${APP_PATH }/static/js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
	$(function() {
		
		
		//查询，回调显示
		$("#findPlaneListBut").click(function(){
			findPlaneList();
		});
		
		//仓位的显示和隐藏
		$("#planeBody").delegate('label','click',function(){
			var aircriftDiv = $(this).next();
			$(aircriftDiv).toggle();
		});
		
		//预定机票td[name=aircraftTd]
		$("#planeBody").delegate('a[name=reservePlane]','click',function(){
			var planeId = $(this).closest("tr").find('td[name=planeId]').text();
			var aircraftId = $(this).next().val();
			window.location.href= "${APP_PATH}/planeController/getPlaneOrderEdit?planeId="+planeId+"&aircraftId="+aircraftId;
		});
	});
	
	
	//动态加载表格
	function findPlaneList(){
		$.ajax({
			url:"${APP_PATH}/planeController/findPlaneList",
			type:"POST",
			data:{
				"startCityName":$("#startCityName").val(),
				"endCityName":$("#endCityName").val(),
				"startDate":$("#startDate").val()
			},
			success: function (result) {  
				$("#planeBody").empty();
				var planeList = result.extend.planeList;
				$.each(planeList,function(index,plane){
					var planeId = $("<td name='planeId' style='display: none;'></td>").append(plane.planeId);
					var planeNo = $("<td name='planeNumber'></td>").append(plane.planeNumber);
					var startDate = $("<td name='startDate'></td>").append(plane.startDate);
					var endDate = $("<td></td>").append(plane.endDate);
					var startCityName = $("<td name='startCityName'></td>").append(plane.startCityName);
					var endCityName = $("<td name='endCityName'></td>").append(plane.endCityName);
					var startAirportName = $("<td name='startAirportName'></td>").append(plane.startAirportName);
					var endAirportName = $("<td></td>").append(plane.endAirportName);
					var stock = $("<td></td>").append(plane.stock);
					var planePrice = $("<td></td>").append(plane.planePrice);
					var aircraftList = plane.aircrafts;
					var aircraftDiv = $("<div name='aircraft'  style='display:none;'></div>").append("<br/>");
					$.each(aircraftList,function(index,aircraft){
						var aircraftName = $("<span></span>").append(aircraft.aircraftName).append("   ");
						var aircraftPrice = $("<span></span>").append(aircraft.aircraftPrice).append("   ").append("   ");
						var aircraftA = $("<a name='reservePlane' href='javascript:void(0);' style='text-decoration: none;'></a>").append("预定");
						var aircraftInput = $("<input type='hidden'>").val(aircraft.aircraftId);
						var aircraftDestine = $("<span></span>").append(aircraftA).append(aircraftInput);
						var aircraftInDiv = $("<div></div>").append(aircraftName).append(aircraftPrice).append(aircraftDestine);
						aircraftDiv.append(aircraftInDiv);
					});
					var aircraftLabel = $("<label name='showAircraftName'></label>").append("选择仓位");
					var showAircraftId = $("<td name='aircraftTd'></td>").append(aircraftLabel).append(aircraftDiv);
					//append方法执行完成以后还是返回原来的元素
					$("<tr></tr>").append(planeId)
						.append(planeNo)
						.append(startDate)
						.append(endDate)
						.append(startCityName)
						.append(endCityName)
						.append(startAirportName)
						.append(endAirportName)
						.append(stock)
						.append(planePrice)
						.append(showAircraftId)
						.appendTo("#planeBody");
			});
        }  
		});
	}
	
	
	
	
	
</script>
</head>
<body>
	<div class="container">
		<div class="table-responsive">
			<form class="form-inline">
				<div class="form-group">
					<label for="exampleInputName2">出发城市</label> <input type="text"
						class="form-control" id="startCityName" value="${plane.startCityName }">
				</div>
				<div class="form-group">
					<label for="exampleInputEmail2">到达城市</label> <input type="text"
						class="form-control" id="endCityName" value="${plane.endCityName }">
				</div>
				<div class="form-group">
					<label for="exampleInputEmail2">出发时间</label> <input id="startDate"
						value="${plane.startDate }" class="Wdate"
						onfocus="WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'%y-%M-%d',readOnly:true})"
						style="width: 130px; height: 32px; border-radius: 4px;" />
				</div>
				<button type="button" class="btn btn-default" id="findPlaneListBut">查询</button>
			</form>
		</div>
		<br>

		<div class="table-responsive">
			<table class="table table-hover">
				<thead>
					<tr style="color: blue;">
						<th>航班</th>
						<th>出发时间</th>
						<th>到达时间</th>
						<th>出发城市</th>
						<th>到达城市</th>
						<th>出发机场</th>
						<th>到达机场</th>
						<th>库存</th>
						<th>价格</th>
					</tr>
				</thead>
				<tbody id="planeBody">
					<c:forEach items="${planeList }" var="plane">
					<tr id="planeTr">
						<td name="planeId" style="display: none;">${plane.planeId }</td>
						<td name="planeNumber">${plane.planeNumber }</td>
						<td name="startDate">${plane.startDate }</td>
						<td name="endDate">${plane.endDate }</td>
						<td name="startCityName">${plane.startCityName }</td>
						<td name="endCityName">${plane.endCityName }</td>
						<td name="startAirportName">${plane.startAirportName }</td>
						<td name="endAirportName">${plane.endAirportName}</td>
						<td name="">${plane.stock }</td>
						<td name="">${plane.planePrice }</td>
						<td name="aircraftTd">
							<label name="showAircraftName">选择仓位</label>
							<div  style="display: none;">
							<br>
								<c:forEach items="${plane.aircrafts }" var="aircraft">
									<div>
										<span>${aircraft.aircraftName }</span>&nbsp;&nbsp;&nbsp;&nbsp;
										<span>${aircraft.aircraftPrice }</span>&nbsp;&nbsp;&nbsp;&nbsp;
										<span><a name="reservePlane" href="javascript:void(0);"style="text-decoration: none;">预定</a><input type="hidden" value="${aircraft.aircraftId }"></span>
									</div>
								</c:forEach>
							</div>
						</td>
					</tr>
				</c:forEach>
				</tbody>
			</table>
		</div>
	</div>

</body>
</html>